<template>
  <div class="container">
    <el-form :model="formInline" label-width="120px" align="left" @keyup.enter.native="search" @submit.native.prevent>
      <el-row>
        <el-col :span="6">
          <el-form-item :label="$t('m.page.region')+$t('m.name')">
            <el-input maxlength="20" show-word-limit v-model.trim="formInline.areaname" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-button type="primary" @click="search" v-if="hasPermission('search')">{{$t('m.query')}}</el-button>
          <el-button type="primary" @click="setStrategy" v-if="hasPermission('strategy')">{{$t('m.container.strategy')}}</el-button>
          <el-button type="primary" @click.stop="toBatchAssign" v-if="hasPermission('assign')">{{$t('m.container.assign')}}</el-button>
          <el-button @click.stop="showFile" v-if="hasPermission('download')">{{$t('m.container.download')}}</el-button>
          <el-upload
            :show-file-list="false"
            :with-credentials="true"
            style="display:inline-block;margin-left:10px"
            class="upload-demo"
            :headers="myHeaders"
            :action="uploadurl"
            :on-success="uploadSuccess"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            :auto-upload="true"
          >
            <el-button v-if="hasPermission('assign')">{{$t('m.import')}}</el-button>
          </el-upload>
        </el-col>
      </el-row>
    </el-form>
    <div class="ellipse"></div>
    <el-row>
      <el-col :span="24">
        <el-table ref="table" class="table-wrap" stripe empty-text fits :data="tableData" :row-style="tableRowStyle" :row-class-name="tableRowClassName" @row-click="rowClick" v-loading="tableLoading">
          <el-table-column align="center" prop="areacode" :label="$t('m.container.code')"></el-table-column>
          <el-table-column align="center" prop="areaname" :label="$t('m.page.region')+$t('m.name')">
            <template slot-scope="scope">
              <el-button style="text-transform: none;" type="text" @click.stop="toInfo(scope.row)" v-if="hasPermission('table-areaname')">{{scope.row.areaname}}</el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="partitionname" :label="$t('m.container.belong')"></el-table-column>
          <el-table-column align="center" prop="locationnumber" :label="$t('m.region.locationnumber')"></el-table-column>
          <el-table-column align="center" :label="$t('m.operation')">
            <template slot-scope="scope">
              <el-button type="primary" @click.stop="toInfo(scope.row)" size="mini" v-if="hasPermission('table-areaname')">{{$t('m.container.see')}}</el-button>
              <el-button type="primary" @click.stop="toAssign(scope.row)" size="mini" v-if="hasPermission('assign')">{{$t('m.container.assign')}}</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination background layout="sizes, prev, pager, next, jumper" :page-sizes="pageSizeList" :page-size="rowSize" :current-page="page" :total="totalRows" @current-change="currentChangeInitFn" @size-change="handleSizeChangeInitFn"></el-pagination>
      </el-col>
    </el-row>
    <el-dialog :title="$t('m.container.strategy')" :visible.sync="dialogVisible" width="600" center>
      <el-table ref="table" class="table-wrap" stripe empty-text fits :data="strategyData" :row-style="tableRowStyle" :row-class-name="tableRowClassName" @row-click="rowClick">
        <el-table-column align="center" type="index" label></el-table-column>
        <el-table-column align="center" prop="strategyName" :label="$t('m.container.name')"></el-table-column>
        <el-table-column align="center" :label="$t('m.operation')">
          <template slot-scope="scope">
            <el-button type="primary" @click.stop="toStrategy(scope.row)" size="mini">{{$t('m.edit')}}</el-button>
            <el-button type="primary" @click.stop="deleteStrategy(scope.row)" size="mini">{{$t('m.delete')}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" @click.stop="toStrategy" size="mini">{{$t('m.add')}}</el-button>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{$t('m.close')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data(){
    return {
      dialogVisible:false,
      formInline:{
        areaname:''
      },
      tableData:[],
      formLabelWidth:'180px',
      fileTemp:null,
      uploadurl:`${window._config_.baseUrl}/areascheduing/import`,
      myHeaders:{},
      strategyData:[]
    }
  },
  components:{},
  watch:{},
  filters:{
  },
  computed:{
  },
  methods:{
    showFile(){
      let newpage = window._config_.filepath + '/group1/M00/00/0B/wKgyOF7pgRWANekiAAAmOQ3Lkss97.xlsx'
      window.open(newpage, '_blank')
    },
    uploadSuccess(response){
      if (response.respHeader.resultCode === 9999){
        let str = response.respBody.res.join(' <br/> ')
        this.$message({
          dangerouslyUseHTMLString:true,
          message:str,
          type:'warning'
        })
      } else {
        this.$message.success(this.$t('m.container.import'))
        this.init()
      }
    },
    lan(arg){
      return this.$t(arg)
    },
    init(){
      this.tableLoading = true
      this.$axios({
        method:'get',
        url:'/warehousearea/page',
        params:{
          page:this.page,
          rows:this.rowSize,
          areaname:this.formInline.areaname
        }
      }).then(({ data }) => {
        this.tableData = data.records
        this.totalRows = data.total
        setTimeout(()=>this.tableLoading=false,500)
      })
    },
    search(){
      this.page = 1
      this.init()
    },
    toInfo(row){
      let obj = {
        componentName:'assign',
        opt:'info',
        id:row.areaid,
        partitionid:row.partitionid
      }
      this.$emit('switchComponent', obj)
    },
    toAssign(row){
      let obj = {
        componentName:'assign',
        opt:'assign',
        id:row ? row.areaid : null,
        partitionid:row ? row.partitionid : null
      }
      this.$emit('switchComponent', obj)
    },
    toBatchAssign(){
      let obj = {
        componentName:'batchAssign',
        opt:'batchAssign'
      }
      this.$emit('switchComponent', obj)
    },
    setStrategy(){
      this.$axios({
        method:'get',
        url:'/schedulingStrategy/get'
      }).then(({ data }) => {
        this.strategyData = data
        this.dialogVisible = true
      })
    },
    toStrategy(row){
      this.dialogVisible=false
      let obj = {
        componentName:'strategy',
        opt:'assign',
        strategyId:row ? row.id : null
      }
      this.$emit('switchComponent', obj)
    },
    deleteStrategy(row){
      this.$confirm(this.$t('m.deleteAlert'), this.$t('m.delete'), {
        confirmButtonText:this.$t('m.confirm'),
        cancelButtonText:this.$t('m.cancel'),
        center:true
      }).then(() => {
        this.$axios({
          method:'delete',
          url:`/schedulingStrategy/delete/${row.id}`
        }).then(() => {
          this.setStrategy()
          this.$message({
            type:'success',
            message:this.$t('m.deleteSuccess')
          })
        })
      })
    }
  },
  activated(){
    this.init()
    this.myHeaders = {
      token:this.$store.state.basicInfo.userInfo.token
    }
  }
}
</script>
<style lang="scss" scoped>
.el-select {
  width: 100%;
}
// ::v-deep.container .el-upload-list {
//   display: none;
// }
</style>